﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link href="${ pageContext.request.contextPath }/css/orderList.css"
	rel="stylesheet" type="text/css">
<script type="text/javascript"
	src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=2r6znGxHPkTla4XNS8aLMF2M1n3YIpqk"></script>
</head>
<body>
	<%@ include file="_head.jsp"%>
	<div id="no_order_info">
		<c:if test="${empty orderInfos }">
		您还没有添加任何订单！	
	</c:if>
	</div>
	<!-- 模版数据 -start -->
	<c:forEach items="${orderInfos }" var="orderInfo">

		<div style="margin: 0 auto; width: 999px;">
			<div style="display: flex; width: 999px;">
				<dl class="Order_information" style="flex: 1">
					<dt>
						<h3>订单信息</h3>
					</dt>
					<dd style="line-height: 26px;">
						订单编号：${orderInfo.order.id } <br />
						下单时间：${orderInfo.order.ordertime } <br />
						订单金额：${orderInfo.order.money } <br /> 支付状态：
						<c:if test="${orderInfo.order.paystate==0}">
							<font color="red">未支付</font>&nbsp;&nbsp;|&nbsp;
						<a
								href="${ pageContext.request.contextPath }/order/delorder?id=${orderInfo.order.id}">
								<img
								src="${ pageContext.request.contextPath }/img/orderList/sc.jpg"
								width="69" height="19" />
							</a>
						&nbsp;
				 		<a
								href="${ pageContext.request.contextPath }/order/payorder?id=${orderInfo.order.id}">
								<img
								src="${ pageContext.request.contextPath }/img/orderList/zx.jpg"
								width="69" height="19">
							</a>
						</c:if>
						<c:if test="${orderInfo.order.paystate==1}">
							<font color="blue">已支付</font>&nbsp;
							<a
								href="${ pageContext.request.contextPath }/order/payorder?id=${orderInfo.order.id}">
								确认收货 </a>
						</c:if>
						<br /> 所属用户：${user.username } <br />
						收货地址：${orderInfo.order.receiverinfo } <br /> 支付方式：在线支付
					</dd>
				</dl>
				<div id="${orderInfo.order.id }" style="flex: 1; height: 250px;">
					地图展示</div>
			</div>

			<table width="999" border="0" cellpadding="0" cellspacing="1"
				style="background: #d8d8d8; color: #333333">
				<tr>
					<th width="276" height="30" align="center" valign="middle"
						bgcolor="#f3f3f3">商品图片</th>
					<th width="247" align="center" valign="middle" bgcolor="#f3f3f3">商品名称</th>
					<th width="231" align="center" valign="middle" bgcolor="#f3f3f3">商品单价</th>
					<th width="214" align="center" valign="middle" bgcolor="#f3f3f3">购买数量</th>
					<th width="232" align="center" valign="middle" bgcolor="#f3f3f3">总价</th>
				</tr>
				<c:forEach items="${orderInfo.map}" var="entry">
					<tr>
						<td align="center" valign="middle" bgcolor="#FFFFFF"><img
							src="${pageContext.request.contextPath }${entry.key.imgurl}"
							width="90" height="105"></td>
						<td align="center" valign="middle" bgcolor="#FFFFFF">${entry.key.name }</td>
						<td align="center" valign="middle" bgcolor="#FFFFFF">${entry.key.price }</td>
						<td align="center" valign="middle" bgcolor="#FFFFFF">${entry.value }件</td>
						<td align="center" valign="middle" bgcolor="#FFFFFF">${entry.key.price*entry.value }元</td>
					</tr>
				</c:forEach>
			</table>
			<div class="Order_price">${orderInfo.order.money }元</div>
		</div>
	</c:forEach>
	<!-- 模版数据 -end -->
	<%@ include file="_foot.jsp"%>
	<script type="text/javascript">
	var idArray= new Array();//存放id
	var receiverinfoArray= new Array();//存放收货地址
	<c:forEach items="${orderInfos }" var="orderInfo">  
	idArray.push('${orderInfo.order.id}'); //js中可以使用此标签，将EL表达式中的值push到数组中 
	receiverinfoArray.push('${orderInfo.order.receiverinfo }');
    </c:forEach>  
    //因为地址解析是异步函数，要使用递归初始化地图
    let initMap=function(i)
    {  
    	if(i>=idArray.length) return;
    	console.log(receiverinfoArray[i])
    	var map = new BMapGL.Map(idArray[i]);          // 创建地图实例 
    	var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
    	map.centerAndZoom(point, 15)
    	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    	let myGeo = new BMapGL.Geocoder();
    	// 将地址解析结果显示在地图上，并调整地图视野
    	myGeo.getPoint(receiverinfoArray[i], function(point){
    	    if(point){
    	        map.centerAndZoom(point, 16);
    	        map.addOverlay(new BMapGL.Marker(point, {title: receiverinfoArray[i]}))
    	    }else{
    	        alert('您选择的地址没有解析到结果！');
    	    }
    	    initMap(i+1)
    	})
    }
    
    let k=0;
	initMap(k)    

	
	</script>
</body>
</html>